<template>
  <div class="visitor-index">
    <a-row class="aRow-wrapper" :gutter="12">
      <a-col class="tree-wrapper" :span="4">
        <left-tree @onSelect="onTreeSelect"></left-tree>
      </a-col>
      <a-col class="listContent-wrapper" :span="20">
        <top-title :updateTime="true" :content="content"></top-title>

        <div class="l-w_content">
          <div class="l-w_c_content">
            <div class="pageInfo">
              <div class="tabsList">
                <a-tabs class="tabs" v-model="activeKey" @tabClick="handelClick">
                  <a-tab-pane key="1" tab="待处理" forceRender>
                    <pending></pending>
                  </a-tab-pane>
                  <a-tab-pane key="2" tab="处理中" forceRender>
                    <processing></processing>
                  </a-tab-pane>
                  <a-tab-pane key="3" tab="已处理" forceRender>
                    <processed></processed>
                  </a-tab-pane>
                </a-tabs>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import leftTree from '@/components/leftTree'
import topTitle from '@/components/topTitle'
import pending from './pending'
import processing from './processing'
import processed from './processed'
import { mapState } from 'vuex'
import { getAction } from '@/api/manage'
import Vue from 'vue'

export default {
  name: 'visitor-index',
  components: { leftTree, topTitle, pending, processing, processed },
  data() {
    return {
      content: [['线索排查']],
      activeKey: '1',
      key: '',
      jurisdictionList: [],
    }
  },
  provide() {
    return {
      proviedData: () => {
        return {
          jurisdictionList: this.jurisdictionList,
        }
      },
    }
  },
  mounted() {
    if (this.$route.query.activeKey) {
      this.activeKey = this.$route.query.activeKey
    }
  },
  computed: {
    ...mapState({
      isPoliceAgencyId: (state) => state.user.isPoliceAgencyId,
    }),
  },
  methods: {
    handelClick(event) {
      this.activeKey = event
    },
    // 左侧树变化之后
    onTreeSelect() {
      this.get_police_list()
    },
    async get_police_list() {
      let policeAgencyId = this.isPoliceAgencyId.id
      this.jurisdictionLoading = true
      let {
        result: { records },
      } = await getAction('/police/jurisdiction/list', { policeAgencyId, pageSize: 99999 })
      this.jurisdictionLoading = false
      this.jurisdictionList = records.map((item) => ({
        id: item.id,
        jurisdictionName: item.jurisdictionName,
        principalPoliceUser: item.principalPoliceUser ? item.principalPoliceUser.name : '暂无',
      }))
    },
  },
}
</script>
<style lang="less" scoped>
.visitor-index {
  width: 100%;
  height: 100%;
  .pageInfo {
    width: 100%;
    height: 100%;
  }
}
</style>
